<style>
	.page {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: #000000;
	}

	.bg-wrapper {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.bg-size {
		width: 750rpx;
		height: 750rpx;
	}

	.button-change-bg {
		background-color: #1e1e1e;
	}

	.button-change-bg-touched {
		background-color: #646262;
	}
</style>

<template>
	<view class="page">


		<view class="bg-wrapper" :style="{height: screenHeight + 'px'}">
			<image :src="bgUrl" class="bg-size" style="align-self: center;"></image>
			<view :class="{'button-change-bg':!changeTouched, 'button-change-bg-touched': changeTouched}"
				@touchstart="touchstartChange" @touchend="touchendChange" @click="changeBg()"
				style="width: 250rpx;height: 80rpx;border-radius: 50px;display: flex;flex-direction: column;justify-content: center;margin-top: 150rpx;align-self: center;">
				<text style="color: #FFFFFF;align-self: center;">更换背景</text>
			</view>
		</view>

	</view>
</template>

<script>
	var system = uni.getSystemInfoSync();
	import server from '@/config/server';
	var app = getApp();
	export default {
		data() {
			return {
				bgUrl: getApp().getUser().bgImg,
				changeTouched: false,
				filename: "",
				screenHeight: system.safeArea.bottom,
			}
		},
		onShow() {
			var bgimg = app.getUser().bgImg;
			if (app.isEmpty(bgimg)) {
				bgimg = "/static/images/defaultBgImg.png";
			}
			
			this.filename = bgimg.substring(bgimg.lastIndexOf("/") + 1);
			this.bgUrl = bgimg;
		},
		methods: {
			touchstartChange() {
				this.changeTouched = true;
			},
			touchendChange() {
				this.changeTouched = false;
			},
			changeBg() {
				var that = this;
				//前端代码
				uni.chooseImage({
					// 只能选择一张图片
					count: 1,
					// 如果选择成功就会进入到success中来进行处理了
					success(res) {
						// res.tempFilePaths是一个临时文件
						if (res.tempFilePaths.length > 0) {
							// 取出你选中的文件
							let filePath = res.tempFilePaths[0]
							try {
								var userinfo = app.getUser();
								var index = userinfo.bgImg.lastIndexOf("/");
								var filename = userinfo.bgImg.substring(index + 1);
								// 上传到minio中去 
								uni.uploadFile({
									// 指定服务器是上传的路径
									url: `${server.baseURL}/api/user/modifty/bgimg/${userinfo.id}`, //仅为示例，非真实的接口地址
									// 你选择相册中的文件
									filePath: filePath,
									// 这个是服务器指定的接受文件的名字
									name: 'file',
									// 因为考虑到接口的安全性，所以用token进行鉴权，防止请求地址被别人所使用
									header:{
										"AuthToken":app.getToken(),
										"AuthUserId":app.getUserId()
									},
									// 上传过程中指定一些参数,方便你就行额外控制
									formData: {
										"filename":filename,
										"bucketname":"userapp"
									},
									// 上传成功的回调
									success: (response) => {
										// 服务器上传成功的信息
										var res = JSON.parse(response.data); 
										if(res.code == 200){
											// 头像取出
											var {bgImg} = res.data; //var avatar = res.data.avatar;
											// 把本地内存的头像进行变更
											userinfo.bgImg = bgImg;
											// 替换本地缓存中之前的用户信息
											app.setUser(userinfo);
											// 返回到个人首页
											uni.navigateBack({
												delta: 1,
												animationType: "fade-out"
											})
										}
									}
								});
							} catch (e) {
								console.log(e)
								uni.$u.toast("头像上传失败...")
							}
						}
					}
				});
				
			}
		}
	}
</script>
